<script setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import { get, post } from '@/utils/request'
const router = useRouter()
const phone = ref('')
const username=useRoute().query.username
const getinfo = async () => {
  try {
    let username = useRoute().query.username
    let res = await get('/wyq/info', { username: username })
    if (res.data.code == 200) {
      phone.value = res.data.phone
      console.log(phone.value)
    } else {
      showToast({
        message: '用户不存在,请检查用户名',
        onClose: () => {
          router.back()
        }
      })
    }
  } catch (err) {
    showToast({
      message: '信息查询失败,请重试',
      onClose: () => {
        router.back()
      }
    })
  }
}
getinfo()
onMounted(async () => {
  await getinfo()
})
</script>

<template>
  <div class="forget-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="忘记密码" left-arrow @click-left="router.back()" />

    <!-- 中间图像区（模拟图片加载失败） -->
    <div class="image-placeholder">
      <img src=".png" alt="加载失败" />
    </div>

    <!-- 提示文字 -->
    <div class="tip-text">
      <div>通过短信验证码</div>
      <div>重新设置密码</div>
    </div>

    <!-- 手机号卡片 -->
    <div class="phone-card">
      <div class="avatar">
        <van-icon name="user-circle-o" size="32" />
      </div>
      <div class="phone-text" v-if="useRoute().query.username">+86 **** **** *{{ phone?.slice(-2) }}</div>

    </div>

    <!-- 底部按钮 -->
    <div class="btn-wrap">
      <van-button block type="primary" color="#000" @click="()=>{router.push({name:'yzm',query:{phone:phone,username:username}})}">
        继续
      </van-button>
    </div>
  </div>
</template>



<style scoped>
.forget-container {
  padding: 16px;
  background-color: #fff;
  min-height: 100vh;
}

.image-placeholder {
  width: 100%;
  height: 180px;
  background-color: #eee;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0 16px;
}

.image-placeholder img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.5;
}

.tip-text {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
  font-weight: 600;
}

.phone-card {
  display: flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 32px;
}

.avatar {
  margin-right: 12px;
  background-color: #ddd;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-text {
  font-size: 16px;
  color: #000;
}

.btn-wrap {
  padding: 0 16px;
  margin-top: 50%;
}
</style>